class Toast extends HTMLElement {
  static get observedAttributes() {
    return ["open"];
  }
  timer = null;
  constructor(duration = 3000) {
    super();
    this.duration = duration;
  }

  get open() {
    return this.hasAttribute("open");
  }
  set open(value) {
    this.toggleAttribute("open", value);
  }

  show() {
    this.open = true;
  }

  hide() {
    this.open = false;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "open" && this.open) {
      this.render();
    }
  }

  disconnectedCallback() {
    this.timer && clearTimeout(this.timer);
  }

  render() {
    // this.timer && clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.hide();
    }, this.duration);
  }
}

customElements.define("jc-toast", Toast);

export default Toast;
